<template>
  <el-container>
    <el-aside width="220px" class="sidebar">
      <div class="logo">车牌识别系统</div>
      <el-menu
          router
          :default-active="activePath"
          class="menu"
      >
        <el-menu-item index="/parking">
          <el-icon>
            <Opportunity/>
          </el-icon>
          <span>进出管理</span>
        </el-menu-item>
        <el-menu-item index="/query">
          <el-icon>
            <Search/>
          </el-icon>
          <span>记录查询</span>
        </el-menu-item>
        <el-menu-item index="/statistics">
          <el-icon>
            <Histogram/>
          </el-icon>
          <span>时段统计</span>
        </el-menu-item>
        <el-menu-item index="/heatmap">
          <el-icon>
            <MapLocation/>
          </el-icon>
          <span>车流热力</span>
        </el-menu-item>
        <el-menu-item index="/revenue">
          <el-icon>
            <Money/>
          </el-icon>
          <span>营收分析</span>
        </el-menu-item>

      </el-menu>
    </el-aside>

    <el-main>
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component"/>
        </transition>
      </router-view>
    </el-main>
  </el-container>
</template>

<script setup>
import {computed} from 'vue'
import {useRoute} from 'vue-router'
import {Histogram, MapLocation, Money, Opportunity, Search} from '@element-plus/icons-vue'

const route = useRoute()

// 计算当前激活菜单路径
const activePath = computed(() => route.path)
</script>

<style>
.sidebar {
  background: #304156;
  height: 100vh;
  transition: width 0.3s;
}

.logo {
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #fff;
  font-size: 18px;
  background: #2b2f3a;
}

.menu {
  border-right: none;
  background: #304156;
}

.menu .el-menu-item {
  color: #bfcbd9;
}

.menu .el-menu-item.is-active {
  background: #263445 !important;
  color: #409EFF;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.sidebar {
  z-index: 1000;
  position: relative; /* 保持原有定位 */
}

.heatmap-container {
  width: 100%;
  height: 600px;
  padding: 20px;
}


</style>